<template>
  <div class="app">
    <div class="title">
      <!-- 搜索部分开始 -->
      <div class="search">
        <el-input
          placeholder="输入商品名称"
          v-model="ProductName"
          clearable
          class="searchInput"
        ></el-input>
        <el-input
          placeholder="输入商品条形码"
          v-model="BarCode"
          clearable
          class="searchInput"
        ></el-input>
        <el-select
          v-model="ProductStatus"
          clearable
          placeholder="请选择商品状态"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="searchInput ProductStatus"
          ></el-option>
        </el-select>
        <el-cascader
          :options="Categoryser"
          v-model="category"
          :props="{ checkStrictly: true }"
          clearable
          placeholder="请选择类目"
          class="searchInput"
        ></el-cascader>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查找</el-button
        >
        <el-button type="primary" icon="el-icon-edit" @click="searchadd()"
          >添加</el-button
        >
        <el-button
          type="danger"
          :disabled="multipleSelection.length === 0"
          class="batch"
          @click="Batchdel"
          >批量删除</el-button
        >
      </div>
      <!-- 搜素部分结束 -->
      <!-- 表格部分开始 -->
      <div class="tablebox"></div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; font-size: 12px"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <!-- 勾选按钮 -->
        <el-table-column
          label="sku信息 "
          width="70"
          align="center"
          type="expand"
        >
          <template slot-scope="scope">
            <el-table
              :data="scope.row.skuList"
              border
              style="width: 100%; font-size: 12px"
            >
              <el-table-column prop="barCode" label="商品条码" align="center">
              </el-table-column>
              <el-table-column prop="title" label="商品规格" align="center">
              </el-table-column>
              <el-table-column prop="stock" label="商品库存" align="center">
              </el-table-column>
              <el-table-column
                prop="freezeStock"
                label="商品冻结库存"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="originalPrice" label="原价" align="center">
                <template slot-scope="scope">
                  {{ scope.row.originalPrice / 100 }}
                </template>
              </el-table-column>
              <el-table-column prop="price" label="现价" align="center">
                <template slot-scope="scope">
                  {{ scope.row.price / 100 }}
                </template>
              </el-table-column>
              <el-table-column prop="vipPrice" label="VIP价格" align="center">
                <template slot-scope="scope">
                  {{ scope.row.vipPrice / 100 }}
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品ID"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop=""
          label="图片"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <img style="width: 50px" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="商品详细介绍"
          show-overflow-tooltip
          align="center"
          width="90"
        >
          <el-button type="button" @click="checklook" class="checklook"
            >查看</el-button
          >
        </el-table-column>
        <el-table-column
          prop="categoryId"
          label="类目ID"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="freightTemplateId"
          label="邮费模板ID"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sales"
          label="销量"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="是否在售"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :class="scope.row.status == 0 && 2 ? 'nosele' : 'insele'">
              {{ scope.row.status == 0 && 2 ? "未售" : "在售" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          show-overflow-tooltip
          align="center"
          width="300"
        ></el-table-column>
        <el-table-column
          label="操作"
          show-overflow-tooltip
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="button" @click="edit" class="edit"
              >编辑</el-button
            >
            <el-button
              size="mini"
              :type="scope.row.status == 1 ? 'warning' : 'success'"
              @click="shelves(scope.$index, scope.row)"
            >
              {{ scope.row.status == 1 ? "下架" : "上架" }}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deletes(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格部分结束 -->
      <!-- 分页部分开始 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :total="total"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <!-- 分页部分结束 -->
      <!-- 添加&编辑部分开始 -->
      <el-dialog
        :title="bools ? '创建' : '编辑'"
        :visible.sync="dialogFormVisible"
        fullscreen
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-card class="box-card">
            <h1>商品（Spu）介绍</h1>
            <!-- 商品名称 -->
            <el-form-item
              label="商品名称"
              :label-width="formLabelWidth"
              prop="spucommodity"
            >
              <el-input
                v-model="ruleForm.spucommodity"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- 原始价格 -->
            <el-form-item
              label="原始价格"
              :label-width="formLabelWidth"
              prop="spuoriginalPrice"
            >
              <el-input v-model="ruleForm.spuoriginalPrice" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <!-- 当前价格 -->
            <el-form-item
              label="当前价格"
              :label-width="formLabelWidth"
              prop="spucurrentPrice"
            >
              <el-input v-model="ruleForm.spucurrentPrice" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <!-- VIP价格 -->
            <el-form-item
              label="VIP价格"
              :label-width="formLabelWidth"
              prop="spuvipPrice"
            >
              <el-input v-model="ruleForm.spuvipPrice" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <!-- 剩余库存 -->
            <el-form-item
              label="剩余库存"
              :label-width="formLabelWidth"
              prop="spuremainingInventory"
            >
              <el-input
                v-model="ruleForm.spuremainingInventory"
                :disabled="true"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <!-- 运费模板 -->
            <el-form-item label="运费模板" :label-width="formLabelWidth">
              <el-select
                v-model="ruleForm.spufreightTemplate"
                clearable
                placeholder="请选择商品运费模板"
              >
                <el-option
                  v-for="item in spufreightTemplate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 是否在售 -->
            <el-form-item label="是否在售" :label-width="formLabelWidth">
              <template>
                <el-radio-group v-model="radio">
                  <el-radio label="1">在售</el-radio>
                  <el-radio label="2">下架</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <!-- 商品图片 -->
            <el-form-item
              label="商品图片"
              prop="picUrl"
              :label-width="formLabelWidth"
            >
              <el-upload
                action="http://192.168.1.84:8081/upload/admin"
                list-type="picture-card"
                v-model="ruleForm.picUrl"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <!-- 商品单位 -->
            <el-form-item
              label="商品单位"
              :label-width="formLabelWidth"
              prop="spuunit"
            >
              <el-input
                v-model="ruleForm.spuunit"
                autocomplete="off"
                label="件/个/盒"
              ></el-input>
            </el-form-item>
            <!-- 商品简介 -->
            <el-form-item label="商品简介" :label-width="formLabelWidth">
              <el-input
                v-model="ruleForm.spuintroduction"
                autocomplete="off"
                label="件/个/盒"
              ></el-input>
            </el-form-item>
            <!-- 所属类目 -->
            <el-form-item label="所属类目" :label-width="formLabelWidth">
              <el-cascader
                :options="Categoryserster"
                v-model="categoryster"
                :props="{ checkStrictly: true }"
                clearable
                placeholder="请选择类目"
                class="searchInput"
              ></el-cascader>
            </el-form-item>
            <!-- 商品详细介绍 -->
            <el-form-item label="商品详细介绍" :label-width="formLabelWidth">
              <editor v-model="ruleForm.spudetail" :init="init"> </editor>
            </el-form-item>
          </el-card>
          <el-card class="CommodityType">
            <h1>商品类型(sku)</h1>
            <el-button type="primary" plain @click="skuadd">添加</el-button>
            <template>
              <el-table :data="CommodityType" stripe style="width: 100%">
                <el-table-column
                  prop="skuBarcode"
                  label="Sku条形码"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="skuTypename" label="类型名" width="180">
                </el-table-column>
                <el-table-column prop="skuoriginalPrice" label="原价">
                </el-table-column>
                <el-table-column prop="skuPresentPrice" label="现价">
                </el-table-column>
                <el-table-column prop="skuVIPprice" label="VIP价">
                </el-table-column>
                <el-table-column prop="skuinventory" label="库存">
                </el-table-column>
                <el-table-column label="操作">
                  <el-button type="danger" plain>删除</el-button>
                </el-table-column>
              </el-table>
            </template>
          </el-card>
          <el-card class="parameters">
            <h1>商品参数(sku)</h1>
            <el-button type="primary" plain @click="skuteradd">添加</el-button>
            <template>
              <el-table :data="parameters" stripe style="width: 100%">
                <el-table-column
                  prop="parameterName"
                  label="商品参数名称"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  prop=" parameterValue"
                  label="商品参数值"
                  width="180"
                >
                </el-table-column>
                <el-table-column label="操作">
                  <el-button type="danger" plain>删除</el-button>
                </el-table-column>
              </el-table>
            </template>
          </el-card>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="allcencel('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="allsave('ruleForm')"
            >保存商品</el-button
          >
        </div>
      </el-dialog>
      <!-- 添加&编辑部分结束 -->

      <!-- 商品类型弹框部分开始 -->
      <el-dialog title="添加商品类型（Sku）" :visible.sync="dialogsku">
        <el-form :model="form" :rules="skurules" ref="form" label-width="100px">
          <el-form-item
            label="类型条码"
            :label-width="formLabelWidth"
            prop="SkuBarCode"
          >
            <el-input
              v-model="form.SkuBarCode"
              autocomplete="off"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="类型名称"
            :label-width="formLabelWidth"
            prop="skutypeName"
          >
            <el-input
              v-model="form.skutypeName"
              autocomplete="off"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片(可空)" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              action="http://192.168.1.84:8081/upload/admin"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="skupicUrl" :src="skupicUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="原始价格"
            :label-width="formLabelWidth"
            prop="skuoriginalPrice"
          >
            <el-input
              v-model="form.skuoriginalPrice"
              autocomplete="off"
              style="width: 300px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="当前价格"
            :label-width="formLabelWidth"
            prop="skucurrentPrice"
          >
            <el-input
              v-model="form.skuPresentPrice"
              autocomplete="off"
              style="width: 300px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="VIP价格"
            :label-width="formLabelWidth"
            prop="skuvipPrice"
          >
            <el-input
              v-model="form.skuVIPprice"
              autocomplete="off"
              style="width: 300px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="库存"
            :label-width="formLabelWidth"
            prop="skuremainingInventory"
          >
            <el-input
              v-model="form.skuinventory"
              autocomplete="off"
              style="width: 300px"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogsku = false">取 消</el-button>
          <el-button type="primary" @click="skusure('form')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 商品类型弹框部分结束 -->

      <!-- 商品参数弹框部分开始 -->
      <el-dialog title="设置商品参数" :visible.sync="dialogskuter">
        <el-form :model="formster" :rules="rulester" ref="formster">
          <el-form-item
            label="商品参数名称"
            :label-width="formLabelWidth"
            prop="commodityParameter"
          >
            <el-input
              v-model="formster.commodityParameter"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="商品参数值"
            :label-width="formLabelWidth"
            prop="parameterValue"
          >
            <el-input
              v-model="formster.parameterValue"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="skustercancel">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 商品参数弹框部分结束 -->
    </div>
  </div>
</template>

<script>
import {
  renderinglist,
  spulist,
  moredellist,
  updownllist,
  dellist,
  // addlist,
} from "../encapsulation/Goods";
import Editor from "@tinymce/tinymce-vue"; //引入富文本组件
export default {
  data() {
    return {
      spufreightTemplate: [
        {
          value: "1",
          label: "全国不包邮",
        },
        {
          value: "2",
          label: "全国包邮2",
        },
        {
          value: "3",
          label: "xxx",
        },
      ],
      init: {
        //富文本编辑器
        language: "zh_CN",
        convert_urls: false,
        plugins: [
          "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount",
        ],
        toolbar: [
          "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample",
          "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen",
        ],
      },
      dialogsku: false, //商品类型的显示隐藏
      dialogskuter: false, //商品参数的显示隐藏
      Freightvalue: "", //Select存储的值
      CommodityType: {
        SkuBarCode: "1",
        skutypeName: "2",
        skuoriginalPrice: "4",
        skuPresentPrice: "5",
        skuVIPprice: "6",
        skuinventory: "7",
      }, //商品类型的数组
      parameters: [], //商品参数的数组
      dialogImageUrl: "", //照片上传
      skupicUrl: "", //sku商品图片
      dialogVisible: false, //照片上传
      tableData: [], //渲染数据的列表
      ProductName: "", //搜素部分商品名称
      BarCode: "", //搜素部分商品条形码
      ProductStatus: "", //请选择商品状态绑定的值(不是绑定的数组)
      category: "", //请选择类目绑定的值(不是绑定的数组)
      categoryster: "", //添加编辑弹框所属类目绑定的值(不是绑定的数组)
      Categoryser: [], //请选择类目的数组
      Categoryserster: [], //添加编辑弹框所属类目的数组
      pageNo: 1, // 默认页数
      pageSize: 20, // 页面条数
      formLabelWidth: "120px", //控制label的宽度
      dialogFormVisible: false, //点击隐藏添加对话框
      total: 0, // 总共条数
      bools: true, //判断弹框的布尔值
      multipleSelection: [], //批量删除(保存id的数组)
      radio: "", //在售/下架默认选择哪项
      // 弹框表单里面的内容
      ruleForm: {
        spucommodity: "", //商品名称
        spuoriginalPrice: "", //原始价格
        spucurrentPrice: "", //当前价格
        spuvipPrice: "", //VIP价格
        spuremainingInventory: "", //剩余库存
        spufreightTemplate: "", //运费模板
        spuunit: "", //商品单位
        spuintroduction: "", //商品简介
        spudetail: "", //  详情
        Categoryserster: "", //所属类目
      },
      // sku商品类型弹框内容
      form: {
        SkuBarCode: "", //sku商品sku条形码
        skutypeName: "", // sku商品名称
        skupicUrl: "", //sku商品图片
        skuoriginalPrice: "", //sku原始价格
        skuPresentPrice: "", //sku当前价格
        skuVIPprice: "", //skuVIP价格
        skuinventory: "", //sku商品库存
      },
      // 商品参数表单
      formster: {
        commodityParameter: "", //商品参数名称
        parameterValue: "", //商品参数值
      },
      // 商品参数表单验证
      rulester: {
        commodityParameter: [
          {
            required: true,
            message: "属性名称不能为空",
            trigger: "blur",
          },
        ],
        parameterValue: [
          {
            required: true,
            message: "属性值不能为空",
            trigger: "blur",
          },
        ],
      },
      // sku表单验证
      skurules: {
        SkuBarCode: [
          {
            required: true,
            message: "类型条码不能为空",
            trigger: "blur",
          },
        ],
        skutypeName: [
          {
            required: true,
            message: "类型名称不能为空",
            trigger: "blur",
          },
        ],
        skuoriginalPrice: [
          {
            required: true,
            message: "类型原价不能为空",
            trigger: "blur",
          },
        ],
        skuPresentPrice: [
          {
            required: true,
            message: "类型现价不能为空",
            trigger: "blur",
          },
        ],
        skuVIPprice: [
          {
            required: true,
            message: "类型VIP价格不能为空",
            trigger: "blur",
          },
        ],
        skuinventory: [
          {
            required: true,
            message: "类型库存不能为空",
            trigger: "blur",
          },
        ],
      },
      // 表单验证
      rules: {
        // 商品名称
        spucommodity: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
        ],
        // 原始价格
        spuoriginalPrice: [
          {
            required: true,
            message: "请输入原始价格",
            trigger: "blur",
          },
        ],
        // 当前价格
        spucurrentPrice: [
          {
            required: true,
            message: "请输入当前价格",
            trigger: "blur",
          },
        ],
        // VIP价格
        spuvipPrice: [
          {
            required: true,
            message: "请输入VIP价格",
            trigger: "blur",
          },
        ],
        // 商品单位
        spuunit: [
          {
            required: true,
            message: "物件单位不能为空",
            trigger: "blur",
          },
        ],
        radio: [
          {
            required: true,
            message: "请选择商品状态",
            trigger: "blur",
          },
        ],
      },
      options: [
        //请选择商品状态的数组
        {
          value: 0,
          label: "下架",
        },
        {
          value: 1,
          label: "正常",
        },
      ],
    };
  },
  components: {
    //引入富文本组件
    editor: Editor,
  },
  methods: {
    //渲染数据列表
    getlist() {
      let data = {
        page: this.pageNo, //页码
        limit: this.pageSize, //页码长度
        title: this.ProductName, //商品名称
        barcode: this.BarCode, //搜素条形码
        status: this.options, //商品状态
        categoryId: this.category, //搜素分类(select选择)
      };
      // 数据渲染接口
      renderinglist(data).then((res) => {
        console.log(res);
        this.tableData = res.data.data.items;
        this.total = res.data.data.total;
      });
      // spu树接口
      spulist(data).then((res) => {
        this.Categoryser = res.data.data;
        this.Categoryserster = res.data.data;
      });
    },
    // 添加编辑弹框的取消
    allcencel() {
      this.dialogFormVisible = false;
    },
    // 上架下架
    shelves(index, item) {
      console.log(index);
      console.log(item);
      if (item.status == 0) {
        let arr = {
          spuId: item.id,
          status: 1,
        };
        this.$confirm("将上架" + item.title + ", 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            updownllist(arr).then((res) => {
              console.log(res);
              if (res.data.errno == 200) {
                this.getlist();
                this.$message.success({
                  message: "上架成功!",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        let arrs = {
          spuId: item.id,
          status: 0,
        };
        this.$confirm("将下架" + item.title + ", 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            updownllist(arrs).then((res) => {
              console.log(res);
              if (res.data.errno == 200) {
                this.getlist();
                this.$message.success({
                  message: "下架成功!",
                });
              }
            });
          })
          .catch(() => {
            this.$message.info({
              message: "已取消",
            });
          });
      }
    },
    // 删除
    deletes(index, row) {
      let _this = this;
      let data = {
        spuId: row.id,
      };
      _this
        .$confirm(
          "此操作将永久删除该商品---" + row.title + "---, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(() => {
          dellist(data).then((res) => {
            if (res.data.errno == 200) {
              this.getlist();
              this.$message.success({
                message: "删除成功!",
              });
            }
          });
          this.getlist();
        })
        .catch(() => {
          this.$message("您已取消删除");
        });
    },
    // 勾选按钮批量删除设置(不是删除点击事件)
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量点击删除
    Batchdel() {
      var idsd = this.multipleSelection.map((item) => item.id).join(); //获取所有选中行的id组成的字符串，以逗号分隔
      console.log(idsd);
      let data = {
        // this.JSON.Stringfy
      };
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          moredellist(data).then((res) => {
            if (res.data.errno == 200) {
              this.getlist();
              this.$message.success({
                message: "删除成功!",
              });
            }
          });
          this.getlist();
        })
        .catch(() => {
          this.$message.info("您已取消删除");
        });
    },
    // 查找
    search() {
      (this.pageNo = 1), (this.limit = 20), this.getlist();
    },
    // 添加
    searchadd() {
      this.bools = true;
      this.dialogFormVisible = true;
    },
    // 编辑弹框
    edit(row) {
      console.log(row);
      this.bools = false;
      this.dialogFormVisible = true;
    },
    // 商品状态的点击添加
    skuadd() {
      this.dialogsku = true;
    },
    skuteradd() {
      this.dialogskuter = true;
    },

    // sku商品值点击取消
    // skustercancel() {
    //   this.dialogskuter = false;
    // },
    //商品类型弹框-取消
    skucancel() {
      this.dialogsku = false;
    },
    // 商品类型弹框-确定
    skusure() {},
    // 查看
    checklook() {
      console.log("点击查看");
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getlist();
    },
    // 照片上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.skupicUrl = URL.createObjectURL(file.raw);
    },
    // 商品类型弹框照片上传
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    this.getlist();
  },
};
</script>
<style scoped lang="less">
.app {
  padding: 20px;
  height: 100%;
  overflow: hidden !important;
  position: relative;
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px;
}

.searchInput {
  width: 220px;
  padding: 0 5px;
}

.ProductStatus {
  padding: 0 20px;
}

.tablebox {
  margin-top: 10px;
}

.nosele {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}

.insele {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

.checklook {
  width: 56px;
  height: 28px;
  text-align: center;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  font-size: 12px;
  border-radius: 3px;
  padding: 7px 15px;
}

.edit {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

// 上架
.shelves {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

// 下架
.shelvesdown {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}

.deletes {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.el-card {
  margin-top: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader-icon[data-v-41e5e856] {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed gray;
  border-radius: 10px;
}
</style>
